<!--
 * @Author: windys
 * @Description: 
 * @Date: 2021-12-03 13:43:20
-->
<template>
    <div class="from_page">
        <a-button type="primary" @click="handleOpen">新增菜单</a-button>
        <MModalVue ref="MModalVue" :width="600" :title="'新增菜单'">
            <div class="tip">
                数据详情请见菜单PATH,组件路径详情格式请见:store/data.ts
            </div>
            <a-form
                ref="formRef"
                :model="formState"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
                <a-form-item label="菜单名" name="title">
                    <a-input v-model:value="formState.title" />
                </a-form-item>
                <a-form-item label="菜单PATH" name="path">
                    <a-input v-model:value="formState.path" />
                </a-form-item>
                <a-form-item label="组件路径" required name="url">
                    <a-input v-model:value="formState.url" />
                </a-form-item>
                <a-form-item label="菜单图标" name="icon"></a-form-item>
                <a-form-item label="是否缓存" name="keepAlive">
                    <a-radio-group v-model:value="formState.keepAlive">
                        <a-radio :value="true">是</a-radio>
                        <a-radio :value="false">否</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="菜单类型" name="type">
                    <a-radio-group v-model:value="formState.type">
                        <a-radio :value="1">菜单</a-radio>
                        <a-radio :about="2">按钮</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="是否隐藏" name="hidden">
                    <a-radio-group v-model:value="formState.hidden">
                        <a-radio :value="true">是</a-radio>
                        <a-radio :value="false">否</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-form>
            <template #diyfooter>
                <a-button type="default" @click="resetForm">取消</a-button>
                <a-button type="primary" @click="onSubmit">确认</a-button>
            </template>
        </MModalVue>
    </div>
</template>


<script lang="ts">
import { defineComponent, ref, reactive, toRaw } from 'vue'
import MModalVue from '../../../components/modal/MModal.vue'
export default defineComponent({
    components: {
        MModalVue
    },
    setup() {
        const MModalVue = ref()
        const handleOpen = () => {
            MModalVue.value.show = true
        }

        const formRef = ref();
        const formState = reactive({
            title: "",
            url: "",
            path: "",
            icon: "",
            keepAlive: false,
            type: 1,
            hidden: false,
            children: [
            ]
        });
        const rules = {
            title: [{
                required: true,
                message: '请输入标题',
                trigger: 'blur',
            },],
            url: [{
                required: true,
                message: '请输入组件路径',
                trigger: 'blur',
            }],
            path: [{
                required: true,
                message: '请输入页面路径',
                trigger: 'blur',
            }],
        };

        const onSubmit = () => {
            formRef.value.validate().then(() => {
                console.log('values', formState, toRaw(formState));
            }).catch((error: any) => {
                console.log('error', error);
            });
        };

        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            MModalVue,
            handleOpen,
            formRef,
            labelCol: {
                span: 5,
            },
            wrapperCol: {
                span: 19,
            },
            formState,
            rules,
            onSubmit,
            resetForm,
        }
    },
})
</script>



<style lang="scss" scoped>
.tip{
    margin-bottom: 20px;
    padding: 0 50px;
    color: #0099ff;
}
</style>